import React, { useEffect, useState } from "react";
import style from "./style.less"
import { getFocuseInfo, getUser } from "../../service/account";
import NoAvatar from "../../source/svgs/noavatar.svg";
import { Empty } from "antd";
// import test from "../../service/locaiton"
import { originUserInfo, UserInfo } from "../../interface/account";
import { formatTime, myTip } from "../../tools/publicFun";
import { useNavigate } from "react-router-dom";
import { IRequestArticleParam, ISingleArticle } from "../../interface/Article";
import { getArticles } from "../../service/article";
import { ITab } from "../../interface/tab";

export default function Users() {
  const colorArr = ['#e85724', '#afcd50', '#1195db', '#7e53e0', '#db639b', '#8a8a8a', '#6eb960', '#83c6c2', '#e9ac8b', '#d3a8b2']
  const [userInfo, setUserInfo] = useState<UserInfo>(originUserInfo)
  const [articles, setArticles] = useState<ISingleArticle[]>([])
  const [focusInfo, setFocusInfo] = useState<UserInfo[]>()
  const navigate = useNavigate()

  const sexSelect: { value: string, text: string }[] = [
    {
      value: "male",
      text: "男"
    }, {
      value: "female",
      text: "女",
    }, {
      value: "secret",
      text: "暂时保密"
    }
  ]


  useEffect(() => {
    const user = window.location.href.split("=")[1]
    initUserInfo(user)
    // eslint-disable-next-line
  }, [])

  // function getCityName() {
  //   test()
  // }

  async function getUserArticles(params: IRequestArticleParam) {
    const data = await getArticles(params)
    if (data.stat === 'ok') {
      setArticles(data.data.data)
    } else {
      myTip(data.msg, 'fail')
    }
  }

  async function initUserInfo(userId: string) {
    const data = await getUser({ userId: userId })
    if (data.stat === 'ok') {
      const userInfo = data.data
      setUserInfo(userInfo)
      getUserArticles({ authorId: userId })
      getAllFocusUser({ focus: userInfo.focus })
    }
  }

  async function getAllFocusUser(params: { focus: string[] }) {
    const data = await getFocuseInfo(params)
    if (data.stat === 'ok') {
      setFocusInfo(data.data)
    }
  }

  function handleToUserPage(user: UserInfo) {
    // throw new Error("Function not implemented.");
  }

  function handleArticleDetail(id: string) {
    navigate("/article/id=" + id)
  }

  return (
    <React.Fragment>
      <div className={style.mainContent}>
        <div className={style.basicInfo}>
          <div>
            <div className={style.nicknameBox} >
              <span>{userInfo.nickname}</span>
            </div>
            <div className={style.avatarBox}>
              <img
                className={style.avatar}
                src={userInfo.avatar || NoAvatar}
                alt='#'
              />
            </div>
          </div>
          <div>
            <span>{userInfo.account} | {"ID:" + userInfo.id}</span>
          </div>
        </div>
        <div className={style.detailInfo}>
          <div className={style.titlebar}>
            <span className={style.title}>基本信息</span>
          </div>
          <div className={style.showInfo}>
            <div>
              <span>昵称：</span>
              <span>{userInfo.nickname}</span>
            </div>
            <div>
              <span>个性签名：</span>
              <span>{userInfo.slogan}</span>
            </div>
            <div className={style.selectLine}>
              <span>性别：</span>
              <span>{(sexSelect.find((item) => item.value === userInfo.sex))?.text}</span>
            </div>
            <div className={style.selectLine}>
              <span>所在城市：</span>
              <span>{userInfo.city}</span>
            </div>
            <div className={style.selectLine}>
              <span>年龄：</span>
              <span>{userInfo.age}</span>
            </div>
            <div>
              <span>用户级别：{(userInfo.role.length === 0) ? "普通用户" : "官方用户"}</span>
            </div>
            <div>
              <span>注册时间：</span>
              <span>{formatTime(userInfo.createAt, "ONLY_DAY")}</span>
            </div>
            <div>
              <span>账号：</span>
              <span>{userInfo.account}</span>
            </div>
            <div>
              <span>ID：</span>
              <span>{userInfo.id}</span>
            </div>
            <div>
              <span>账号积分：</span>
              <span>{userInfo.score}</span>
            </div>
          </div>
        </div>
        <div className={style.userArticle}>
          <div className={style.myArticle}>
            <span className={style.title}>TA的文章</span>
          </div>
          <div>
            {articles.length === 0 ?
              <div className={style.empty}>
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={false} />
                <div>该板块还没有任何数据哦</div>
              </div> :
              articles.map((article: ISingleArticle, index: number) => (
                <div
                  className={style.block}
                  key={article.id + index}
                >
                  <div
                    onClick={(value) => {
                      handleArticleDetail(article.id)
                    }}>
                    <div className={style.info}>
                      <div className={style.titleBar}>
                        <div>{article.title}</div>
                      </div>
                      <div className={style.tabs}>
                        {article.tabs.map((tab: ITab, index: number) => (
                          <div
                            style={{ "backgroundColor": colorArr[Math.floor(Number((Math.random() * 10)))] }}
                            className={style.tab}
                            key={tab.value + index}
                          >
                            <span>{tab.lable}</span>
                          </div>
                        ))}
                      </div>
                      <div>
                        <span className={style.publishTime}>
                          {`发布于${formatTime(article.create_Ts, 'ONLY_DAY')}`}
                        </span>
                      </div>
                    </div>
                    {index === articles.length - 1 ? <></> : <div className={style.divide}></div>}
                  </div>
                </div>
              ))}
          </div>
        </div>
        <div className={style.focusList}>
          <div className={style.title}>{"TA的关注"}</div>
          <div className={style.users}>
            {focusInfo?.length === 0 ? <Empty /> : focusInfo?.map((user: UserInfo) => (
              <div onClick={() => handleToUserPage(user)} className={style.singleUser} key={user.account + user.id}>
                <img className={style.focusAvatar} src={user.avatar || NoAvatar} alt={user.nickname} />
                <div className={style.focusName}>{user.nickname}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </React.Fragment>
  )
}